@extends('admin.common.main')
@section('css')
<link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css" />
<style>
</style>
@endsection
@section('cnt')
<div class="x-body page-container">
    @include('admin.common.validate')
    @include('admin.common.msg')
    <form method="post" action="{{ route('admin.fangs.update',['id'=>$data['fang']['id']]) }}" id="form-fang-add">
        {{ csrf_field() }}
        {{ method_field('PUT') }}

          <div class="layui-form-item">
              <label for="fang_name" class="layui-form-label">
                  <span class="x-red">*</span>房源名称
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="fang_name" name="fang_name"
                  autocomplete="off" class="layui-input" value="{{ $data['fang']['fang_name'] }}">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="fang_xiaoqu" class="layui-form-label">
                  <span class="x-red">*</span>小区名称
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="fang_xiaoqu" name="fang_xiaoqu"
                  autocomplete="off" class="layui-input"  value="{{ $data['fang']['fang_xiaoqu'] }}">
              </div>
          </div>
           <div class="layui-form-item">
            <label for="fang_province" class="layui-form-label">
                <span class="x-red">*</span>省
            </label> 
            <div class="layui-input-inline" >
                <select name="fang_province" id="fang_province" onchange="selectCity(this,'fang_city')">
                <option value="0" @if($data['fang']['fang_province'] == 0) selected @endif>==请选择==</option>
                @foreach($data['cityData'] as $item)
                     <option value="{{ $item->id }}" @if($data['fang']['fang_province'] == $item->id) selected @endif>{{ $item->name }}</option>
                @endforeach
                </select>
            </div>
            <label for="fang_city" class="layui-form-label">
                <span class="x-red">*</span>市
            </label> 
            <div class="layui-input-inline" >
                <select name="fang_city" id="fang_city" onchange="selectCity(this,'fang_region')">
                     <option value="0" @if($data['fang']['fang_city'] == 0) selected @endif>==请选择==</option>
                     @foreach($data['currentCityList'] as $item)
                        <option value="{{ $item->id }}" @if($data['fang']['fang_city'] == $item->id)selected @endif>{{ $item->name }}</option>    
                     @endforeach
                </select>
            </div>
            <label for="fang_rent_class" class="layui-form-label">
                <span class="x-red">*</span>区
            </label> 
            <div class="layui-input-inline" >
                <select name="fang_region" id="fang_region">
                     <option value="0" @if($data['fang']['fang_region'] == 0) selected @endif>==请选择==</option>
                     @foreach($data['currentRegionList'] as $item)
                        <option value="{{ $item->id }}" @if($data['fang']['fang_region'] == $item->id)selected @endif>{{ $item->name }}</option>
                     @endforeach
                </select>
            </div>
        </div>
          <div class="layui-form-item">
              <label for="fang_addr" class="layui-form-label">
                  <span class="x-red">*</span>房源地址
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="fang_addr" name="fang_addr" 
                  autocomplete="off" class="layui-input"value="{{ $data['fang']['fang_addr'] }}" >
              </div>
          </div>

          <div class="layui-form-item">
            <label for="fang_direction" class="layui-form-label">
                <span class="x-red"></span>房源朝向
            </label> 
            <div class="layui-input-inline" >
                <select name="fang_direction" id="fang_direction">
                @foreach($data['fang_direction_data'] as $item)
                     <option value="{{ $item->id }}"  @if($data['fang']['fang_direction'] == $item->id)selected @endif>{{ $item->name }}</option>
                @endforeach
                </select>
            </div>
        </div>
        <div class="layui-form-item">
              <label for="fang_build_area" class="layui-form-label">
                  <span class="x-red"></span>房源面积
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="fang_build_area" name="fang_build_area" 
                  autocomplete="off" class="layui-input" value="{{ $data['fang']['fang_build_area'] }}">
              </div>
          </div>

          <div class="layui-form-item">
              <label for="fang_using_area" class="layui-form-label">
                  <span class="x-red"></span>使用面积
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="fang_using_area" name="fang_using_area" 
                  autocomplete="off" class="layui-input" value="{{ $data['fang']['fang_using_area'] }}">
              </div>
          </div>

          <div class="layui-form-item">
              <label for="fang_year" class="layui-form-label">
                  <span class="x-red"></span>建筑年代
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="fang_year" name="fang_year" 
                  autocomplete="off" class="layui-input" value="{{ $data['fang']['fang_year'] }}">
              </div>
          </div>

          <div class="layui-form-item">
              <label for="fang_rent" class="layui-form-label">
                  <span class="x-red"></span>租金
              </label>
              <div class="layui-input-inline">
                  <input type="number" id="fang_rent" name="fang_rent" 
                  autocomplete="off" class="layui-input" value="{{ $data['fang']['fang_rent'] }}">
              </div>
          </div>
            <div class="layui-form-item">
              <label for="fang_fang_floorrent" class="layui-form-label">
                  <span class="x-red"></span>楼层
              </label>
              <div class="layui-input-inline">
                  <input type="number" id="fang_floor" name="fang_floor" 
                  autocomplete="off" class="layui-input" value="{{ $data['fang']['fang_floor'] }}">
              </div>
          </div>

           <div class="layui-form-item">
              <label for="fang_shi" class="layui-form-label">
                  <span class="x-red"></span>室
              </label>
              <div class="layui-input-inline">
                  <input type="number" id="fang_shi" name="fang_shi" 
                  autocomplete="off" class="layui-input" value="{{ $data['fang']['fang_shi'] }}">
              </div>
              <label for="fang_ting" class="layui-form-label">
                  <span class="x-red"></span>厅
              </label>
              <div class="layui-input-inline">
                  <input type="number" id="fang_ting" name="fang_ting" 
                  autocomplete="off" class="layui-input" value="{{ $data['fang']['fang_ting'] }}">
              </div>
              <label for="fang_wei" class="layui-form-label">
                  <span class="x-red"></span>卫
              </label>
              <div class="layui-input-inline">
                  <input type="number" id="fang_wei" name="fang_wei" 
                  autocomplete="off" class="layui-input" value="{{ $data['fang']['fang_wei'] }}">
              </div>
          </div>
        <div class="layui-form-item">
              <label for="icon" class="layui-form-label">
                  <span class="x-red"></span>房屋图片
              </label>
              <div class="layui-input-inline">
                  {{-- 表单提交的时候的路径的地址 --}}
                  {{-- 上传表单的核心是  这里使用隐藏域来保存上传的路径 后传递给后台 --}}
                  <input type="hidden" name="fang_pic" id="fang_pic" value="">
                  <div id="picker">上传房源图片</div>
                  <ul id="imglist" style="width:1000px;margin-left:200px;">
                    {!! $data['fang']['fang_pic'] !!}
                  </ul>
              </div>
          </div>


           <div class="layui-form-item">
            <label for="fang_rent_class" class="layui-form-label">
                <span class="x-red"></span>租赁方式
            </label> 
            <div class="layui-input-inline" >
                <select name="fang_rent_class" id="fang_rent_class">
                @foreach($data['fang_rent_class_data'] as $item)
                     <option value="{{ $item->id }}"  @if($data['fang']['fang_rent_class'] == $item->id)selected @endif>{{ $item->name }}</option>
                @endforeach
                </select>
            </div>
        </div>
         <div class="layui-form-item">
              <label class="layui-form-label"><span class="x-red"></span>配套设施</label>
              <div class="layui-input-block">
                @foreach($data['fang_config_data'] as $item)
                    <span style="margin-top:10px;">{{ $item->name }}</span> <input type="checkbox" name="fang_config[]" @if(in_array($item->id,$data['fang']['fang_conf'])) checked @endif lay-skin="primary" title="否" value="{{ $item->id }}"  style="margin-top:10px;">&nbsp;&nbsp;&nbsp;
                @endforeach
              </div>
          </div>


          <div class="layui-form-item">
              <label for="fang_area" class="layui-form-label">
                  <span class="x-red"></span>区域
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="fang_area" name="fang_area" 
                  autocomplete="off" class="layui-input" value="{{ $data['fang']['fang_area'] }}">
              </div>
          </div>
          <div class="layui-form-item">
              <label for="fang_rent_range" class="layui-form-label">
                  <span class="x-red"></span>租金范围
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="fang_rent_range" name="fang_rent_range" 
                  autocomplete="off" class="layui-input" value="{{ $data['fang']['fang_rent_range'] }}">
              </div>
          </div>
          <div class="layui-form-item">
            <label for="fang_rent_class" class="layui-form-label">
                <span class="x-red"></span>租期方式
            </label> 
            <div class="layui-input-inline" >
                <select name="fang_rent_type" id="fang_rent_type">
                @foreach($data['fang_rent_type_data'] as $item)
                     <option value="{{ $item->id }}" @if($data['fang']['fang_rent_type'] == $item->id)selected @endif>{{ $item->name }}</option>
                @endforeach
                </select>
            </div>
        </div>

          <div class="layui-form-item">
              <label class="layui-form-label"><span class="x-red">*</span>房源状态</label>
              <div class="layui-input-block">
                <span style="margin-top:10px;">正常</span> <input type="radio" name="fang_status" lay-skin="primary" title="正常" value="1" @if($data['fang']['fang_status'] == 1) checked @endif  style="margin-top:10px;">
                <span style="margin-top:10px;">暂停</span> <input type="radio" name="fang_status" lay-skin="primary" title="暂停" value="0" @if($data['fang']['fang_status'] == 0) checked @endif style="margin-top:10px;">
              </div>
          </div>


          <div class="layui-form-item">
            <label for="fang_owner" class="layui-form-label">
                <span class="x-red"></span>房东
            </label> 
            <div class="layui-input-inline" >
                <select name="fang_owner" id="fang_owner">
                @foreach($data['ownerData'] as $item)
                     <option value="{{ $item->id }}" @if($data['fang']['fang_owner'] == $item->id)selected @endif>{{ $item->name }}</option>
                @endforeach
                </select>
            </div>
        </div>


        <div class="layui-form-item">
              <label for="fang_desn" class="layui-form-label">
                  <span class="x-red">*</span>房源描述
              </label>
              <div class="layui-input-inline">
                  <textarea name="fang_desn" id="" cols="80" rows="10">{{ $data['fang']['fang_owner']  }}</textarea>
              </div>
        </div>


        <div class="layui-form-item">
              <label for="fang_body" class="layui-form-label">
                  <span class="x-red"></span>房源信息
              </label>
              <div class="layui-input-inline">
                  <textarea name="fang_body" id="fang_body" cols="30" rows="10">{{ $data['fang']['fang_body']  }}</textarea>
              </div>
        </div>

         <div class="layui-form-item">
              <label for="fang_group" class="layui-form-label">
                  <span class="x-red"></span>租房小组
              </label>
              <div class="layui-input-inline">
                  <input type="text" id="fang_group" name="fang_group" 
                  autocomplete="off" class="layui-input" value="{{ $data['fang']['fang_group']  }}">
              </div>
          </div>
        <div class="layui-form-item">
              <label class="layui-form-label"><span class="x-red"></span>是否推荐</label>
              <div class="layui-input-block">
                <span style="margin-top:10px;">是</span> <input type="radio" name="is_recommend" @if($data['fang']['is_recommend'] == 1) checked @endif lay-skin="primary"  title="是" value="1" style="margin-top:10px;">
                <span style="margin-top:10px;">否</span> <input type="radio" name="is_recommend"  @if($data['fang']['is_recommend'] == 0) checked @endif lay-skin="primary" title="否" value="0" style="margin-top:10px;">
              </div>
          </div>
          </div>
          <div class="layui-form-item">
              <label for="L_repass" class="layui-form-label">
              </label>
              <button  class="layui-btn" lay-filter="add" type="submit">
                  修改房源
              </button>
          </div>
      </form>
</div>
@endsection
@section('js')
<script src="/js/vue.js"></script>
<script src="/webuploader/webuploader.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/admin/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script src="/ueditor/ueditor.config.js"></script>
<script src="/ueditor/ueditor.all.js"></script>
<script type="text/javascript" src="/admin/js/xcity.js"></script>
<script>
    //百度编辑器初始化
    var ue = UE.getEditor('fang_body',{
        initialFrameHeight:450,
        initialFrameWidth:1300
    });


    layui.use(['laydate','code'], function(){
        var laydate = layui.laydate;
        laydate.render({
            elem: '#fang_year', //指定元素
            type:'year'
        });
        layui.code();
        $('#x-city').xcity('陕西','西安市','雁塔区');
     });
  

    //前端表单验证
    $("#form-fangs-add").validate({
        //规则
        rules:{
            //表单元素名称
            fang_name:{
                required:true
            },
            fang_xiaoqu:{
                required:true
            },
            fang_province:{
                min:1
            },
            fang_city:{
                min:1
            },
            fang_region:{
                min:1
            },
            fang_addr:{
                required:true
            },
            fang_desn:{
                required:true
            }
        },
        messages:{
            fang_name:"请输入房源名称",
            fang_xiaoqu:'请输入小区名称',
            fang_province:'请选择省',
            fang_city:'请选择市',
            fang_region:'请选择县',
            fang_addr:'请填写地址',
            fang_desn:'请填写房源描述'
        },
        onkeyup:false,
        success:"valid",
        submitHandler:function (form) {
            console.log(form)
            form.submit();
        }
    });


    //下拉省  出现市   下拉市  出现县区
    function selectCity(obj,selectType){
        var _that = $(obj);
        var id = _that.val();
        //如果选择了省,市和区都进行初始化
        //如果选择了市，那么如果选择的是0的话，要对县进行初始化
        if(selectType == 'fang_city'){
            $("#fang_region").html('<option value="0">==请选择==</option>');
            if(id == 0){
                $("#fang_city").html('<option value="0">==请选择==</option>');
                $("#fang_region").html('<option value="0">==请选择==</option>');
                return false;
            }
        }else if(selectType == 'fang_region'){
            if(id == 0){
                $("#fang_region").html('<option value="0">==请选择==</option>');
                return false;
            }
        }
        var html = '<option value="0">==请选择==</option>';
        $.get('{{ route('admin.fangs.citys') }}',{id:id}).then(jsonArr => {
            jsonArr.map(item => {
                let {id,name} = item;
                html += `<option value="${id}">${name}</option>`;
            });
            $("#"+selectType).html(html);
        });
    }

    //初始化webuploader
    //
    var uploader = WebUploader.create({
        //选完之后，是否自动上传
        auto:true,
        //swf文件路径
        swf:'/webuploader/Uploader.swf',
        //文件接收服务端,上传的php代码
        server:'{{ route('admin.fangs.upfile') }}',
        //选择文件的按钮
        pick:{
            id:"#picker",
            //是否开启选择多个文件的能力
            multiple:true
        },
        //文件上传携带的参数
        formData:{
            _token:'{{ csrf_token() }}'
        },
        //文件上传的表单名称【默认是file】
        fileVal:'file',
        //压缩image,默认如果是jpeg，文件上传前会进行压缩再上传
        resize:true
    });

    //文件上传之后的回调 【这是插件内置方法】
    uploader.on('uploadSuccess',function(file,ret){
        console.log(ret.url)
        let val = $("#fang_pic").val();
        let temp = val + '#' + ret.url;
        $("#fang_pic").val(temp);
        //将数据显示在页面上
        let html = `
            <li style="float: left;margin-left:100px;">
                <img src="${ret.url}" style="width: 100px;height:100px;border:1px solid #ccc;position: absolute;">
                <span class="X" onclick="delpic(this,'${ret.url}')" style="position: relative;left:90px; font-size:16px;color:#FFFFFF;background:#000000;cursor:pointer">X</span>
            </li>
        `;
        $("#imglist").append(html);
    });

     $(document).on('mouseover','.X',function(){
        $(this).css('color','red');
    })

     $(document).on('mouseout','.X',function(){
        $(this).css('color','#FFFFFF');
    })


    //删除图片
    function delpic(obj,picurl){
        console.log(obj)
        //删除图片这边要做三件事   {1：页面上图片的删除  2：隐藏域中图片地址的删除  3：向后台发起ajax请求，进行真实图片的删除}
        //定义删除图片的地址
        let url = "{{ route('admin.fangs.delpic') }}?file="+picurl;
        $.ajax({
            type: "get",
            url: url,
            dataType: "json",
            success: function (response) {
                if(response.status == 0){
                    $(obj).parent().remove();
                    $("#fang_pic").val($("#fang_pic").val().replace(`#${picurl}`,''));
                }
            }
        });
        
    }

</script>
@endsection